<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FusionCharts v3 Documentation</title>
<link rel="stylesheet" href="Style.css" type="text/css" />
</head>

<body>
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
  <tr> 
    <td><h2 class="pageHeader">Using FusionCharts with ColdFusion &gt; Charting Data from an Array </h2></td>
  </tr>
  <tr> 
    <td valign="top" class="text"><p>In this section, we'll show you how to use FusionCharts and CFM to plot charts from data contained in CFM arrays. We'll cover the following examples here:</p>
      <ul>
        <li>Creating a single series chart from data contained in arrays</li>
        <li>Creating a multi-series chart from data contained in arrays </li>
      </ul>
      <p><strong>Before you go further with this page, we recommend you to please see the previous section &quot;Basic Examples&quot; as we start off from concepts explained in that page. </strong></p>
      <p class="highlightBlock">The code examples contained in this page are present in <span class="codeInline">Download Package &gt; Code &gt; CFM &gt; ArrayExample</span> folder. </p></td>
  </tr>
  <tr>
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" class="header">Creating a single series chart from data contained in arrays</td>
  </tr>
  <tr>
    <td valign="top" class="text">The code to create a single series chart is contained in <span class="codeInline">SingleSeries.cfm</span> and can be listed as under: </td>
  </tr>
  <tr>
    <td valign="top" class="codeBlock"><p>&lt;HTML&gt;<br />
      &lt;HEAD&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;TITLE&gt;<br />
&nbsp;&nbsp;&nbsp;FusionCharts - Array Example using Single Series Column 3D Chart<br />
&nbsp;&nbsp;&nbsp;&lt;/TITLE&gt;<br />
&nbsp;&nbsp;&nbsp;<strong>&lt;SCRIPT LANGUAGE=&quot;Javascript&quot; SRC=&quot;../../FusionCharts/FusionCharts.js&quot;&gt;&lt;/SCRIPT&gt;</strong><br />
&lt;/HEAD&gt;<br />
<strong>&lt;cfinclude template=&quot;../Includes/FusionCharts.cfm&quot;&gt;</strong><br />
&lt;BODY&gt;<br />
      <span class="codeComment">&nbsp;&nbsp;&nbsp;&lt;!--- <br />
  &nbsp;&nbsp;&nbsp;Let's store the sales data for 6 products in our array). We also store<br />
  &nbsp;&nbsp;&nbsp;the name of products. <br />
  &nbsp;&nbsp;&nbsp;---&gt;<br />
      </span>&nbsp;&nbsp;&nbsp;&lt;cfset arrData = ArrayNew(2)&gt;<br />
      <span class="codeComment">&nbsp;&nbsp;&nbsp;&lt;!--- Store Name of Products ---&gt;</span><br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[1][1] = &quot;Product A&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[2][1] = &quot;Product B&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[3][1] = &quot;Product C&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[4][1] = &quot;Product D&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[5][1] = &quot;Product E&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[6][1] = &quot;Product F&quot;&gt;<br />
<span class="codeComment">&nbsp;&nbsp;&nbsp;&lt;!--- Store sales data ---&gt;</span><br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[1][2] = 567500&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[2][2] = 815300&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[3][2] = 556800&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[4][2] = 734500&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[5][2] = 676800&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[6][2] = 648500&gt;</p>
      <p> <span class="codeComment">&nbsp;&nbsp;&nbsp;&lt;!--- Now, we need to convert this data into XML. We convert using string concatenation. ---&gt;<br />
      </span>&nbsp;&nbsp;&nbsp;&lt;cfset strXML = &quot;&lt;chart caption='Sales by Product' numberPrefix='$' formatNumberScale='0'&gt;&quot;&gt;<br />
      <span class="codeComment">&nbsp;&nbsp;&nbsp;&lt;!--- Convert data to XML and append ---&gt;</span><br />
&nbsp;&nbsp;&nbsp;&lt;cfloop from=&quot;1&quot; to=&quot;#arrayLen(arrData)#&quot; index=&quot;i&quot;&gt;<br />
<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;cfset strXML = strXML &amp; &quot;&lt;set label='&quot; &amp; arrData[i][1] &amp; &quot;' value='&quot; &amp; arrData[i][2] &amp; &quot;' /&gt;&quot;&gt;</b><br />
&nbsp;&nbsp;&nbsp;&lt;/cfloop&gt;<br />
<span class="codeComment">&nbsp;&nbsp;&nbsp;&lt;!--- Close &lt;chart&gt; element ---&gt;</span><br />
&nbsp;&nbsp;&nbsp;&lt;cfset strXML = strXML &amp; &quot;&lt;/chart&gt;&quot;&gt;<br />
  <br />
  <span class="codeComment">&nbsp;&nbsp;&nbsp;&lt;!--- Create the chart - Column 3D Chart with data contained in strXML ---&gt;</span><br />
&nbsp;&nbsp;&nbsp;&lt;cfoutput&gt;#renderChart(&quot;../../FusionCharts/Column3D.swf&quot;, &quot;&quot;, strXML, &quot;productSales&quot;, 600, 300, false, false)#&lt;/cfoutput&gt;<br />
&lt;/BODY&gt;<br />
&lt;/HTML&gt;</p></td>
  </tr>
  <tr>
    <td valign="top" class="text"><p>In the above example, we first include <span class="codeInline">FusionCharts.js</span> file to enable us embed the chart using JavaScript. We also include <span class="codeInline">FusionCharts.cfm</span> to help us easily embed the charts.</p>
    <p>Thereafter, we define an CFM array <span class="codeInline">arrData</span> to store sales data for 6 different products. The array has two columns - first one for data label and the next one for data values. </p>
    <p>We define a variable <span class="codeInline">strXML</span> to store the entire XML data. To build the XML, we iterate through the array and using string concatenation. Finally, we render the chart using <span class="codeInline">renderChart()</span> function and pass <span class="codeInline">strXML</span> as <span class="codeInline">dataXML</span>. </p>
    <p>When you view the chart, you'll see a chart as under: </p></td>
  </tr>
  <tr>
    <td valign="top" class="text"><img src="Images/Code_ArraySS.jpg" width="584" height="287" /></td>
  </tr>
  <tr>
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" class="header">Creating a multi-series chart from data contained in arrays </td>
  </tr>
  <tr>
    <td valign="top" class="text">Let us now create a multi-series chart from data contained in arrays. We create a file <span class="codeInline">MultiSeries.cfm</span> with the following code: </td>
  </tr>
  <tr>
    <td valign="top" class="codeBlock"><p>&lt;HTML&gt;<br />
      &nbsp;&nbsp;&nbsp;&lt;HEAD&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;TITLE&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FusionCharts - Array Example using Multi Series Column 3D Chart<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/TITLE&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;SCRIPT LANGUAGE=&quot;Javascript&quot; SRC=&quot;../../FusionCharts/FusionCharts.js&quot;&gt;&lt;/SCRIPT&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;/HEAD&gt;<br />
&lt;cfinclude template=&quot;../Includes/FusionCharts.cfm&quot;&gt;<br />
&lt;BODY&gt;<br />
<span class="codeComment">&nbsp;&nbsp;&nbsp;&lt;!---<br />
  &nbsp;&nbsp;&nbsp;Let's store the sales data for 6 products in our array. We also store<br />
  &nbsp;&nbsp;&nbsp;the name of products. <br />
  &nbsp;&nbsp;&nbsp;---&gt;<br />
</span>&nbsp;&nbsp;&nbsp;&lt;cfset arrData = arrayNew(2)&gt;<br />
<span class="codeComment">&nbsp;&nbsp;&nbsp;&lt;!--- Store Name of Products ---&gt;</span><br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[1][1] = &quot;Product A&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[2][1] = &quot;Product B&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[3][1] = &quot;Product C&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[4][1] = &quot;Product D&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[5][1] = &quot;Product E&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[6][1] = &quot;Product F&quot;&gt;<br />
<span class="codeComment">&nbsp;&nbsp;&nbsp;&lt;!--- Store sales data ---&gt;</span><br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[1][2] = 567500&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[2][2] = 815300&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[3][2] = 556800&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[4][2] = 734500&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[5][2] = 676800&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[6][2] = 648500&gt;<br />
<span class="codeComment">&nbsp;&nbsp;&nbsp;&lt;!--- Store sales data for previous year ---&gt;</span><br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[1][3] = 547300&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[2][3] = 584500&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[3][3] = 754000&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[4][3] = 456300&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[5][3] = 754500&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset arrData[6][3] = 437600&gt;</p>
      <p> &nbsp;&nbsp;&nbsp;&lt;cfset strXML = &quot;&lt;chart caption='Sales by Product' numberPrefix='$' formatNumberScale='1' rotateValues='1' placeValuesInside='1' decimals='0' &gt;&quot;&gt;<br />
          <br />
          <span class="codeComment">&nbsp;&nbsp;&nbsp;&lt;!--- Initialize &lt;categories&gt; element - necessary to generate a multi-series chart ---&gt;</span><br />
&nbsp;&nbsp;&nbsp;&lt;cfset strCategories = &quot;&lt;categories&gt;&quot;&gt;<br />
  <br />
  <span class="codeComment">&nbsp;&nbsp;&nbsp;&lt;!--- Initiate &lt;dataset&gt; elements ---&gt;</span><br />
&nbsp;&nbsp;&nbsp;&lt;cfset strDataCurr = &quot;&lt;dataset seriesName='Current Year'&gt;&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset strDataPrev = &quot;&lt;dataset seriesName='Previous Year'&gt;&quot;&gt;<br />
  <br />
  <span class="codeComment">&nbsp;&nbsp;&nbsp;&lt;!--- Iterate through the data ---&gt; </span><br />
&nbsp;&nbsp;&nbsp;&lt;cfloop from=&quot;1&quot; to=&quot;#arrayLen(arrData)#&quot; index=&quot;i&quot;&gt;<br />
<span class="codeComment"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b>&lt;!--- Append &lt;category name='...' /&gt; to strCategories ---&gt;</span><br />
<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b>&lt;cfset strCategories = strCategories &amp; &quot;&lt;category name='&quot; &amp; arrData[i][1] &amp; &quot;' /&gt;&quot;&gt;<br />
<span class="codeComment"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b>&lt;!--- Add &lt;set value='...' /&gt; to both the datasets ---&gt;</span><br />
<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b>&lt;cfset strDataCurr = strDataCurr &amp; &quot;&lt;set value='&quot; &amp; arrData[i][2] &amp; &quot;' /&gt;&quot;&gt;<br />
<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b>&lt;cfset strDataPrev = strDataPrev &amp; &quot;&lt;set value='&quot; &amp; arrData[i][3] &amp; &quot;' /&gt;&quot;&gt; <br />
&nbsp;&nbsp;&nbsp;&lt;/cfloop&gt;<br />
  <br />
  <span class="codeComment">&nbsp;&nbsp;&nbsp;&lt;!--- Close &lt;categories&gt; element ---&gt;</span><br />
&nbsp;&nbsp;&nbsp;&lt;cfset strCategories = strCategories &amp; &quot;&lt;/categories&gt;&quot;&gt;<br />
  <br />
  <span class="codeComment">&nbsp;&nbsp;&nbsp;&lt;!--- Close &lt;dataset&gt; elements ---&gt;</span><br />
&nbsp;&nbsp;&nbsp;&lt;cfset strDataCurr = strDataCurr &amp; &quot;&lt;/dataset&gt;&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;cfset strDataPrev = strDataPrev &amp; &quot;&lt;/dataset&gt;&quot;&gt;<br />
  <br />
  <span class="codeComment">&nbsp;&nbsp;&nbsp;&lt;!--- Assemble the entire XML now ---&gt;</span><br />
&nbsp;&nbsp;&nbsp;&lt;cfset strXML = strXML &amp; strCategories &amp; strDataCurr &amp; strDataPrev &amp; &quot;&lt;/chart&gt;&quot;&gt;<br />
  <br />
  <span class="codeComment">&nbsp;&nbsp;&nbsp;&lt;!--- Create the chart - MS Column 3D Chart with data contained in strXML ---&gt;</span><br />
&nbsp;&nbsp;&nbsp;&lt;cfoutput&gt;#renderChart(&quot;../../FusionCharts/MSColumn3D.swf&quot;, &quot;&quot;, strXML, &quot;productSales&quot;, 600, 300, false, false)#&lt;/cfoutput&gt;<br />
&lt;/BODY&gt;<br />
&lt;/HTML&gt;</p>
    </td>
  </tr>
  <tr>
    <td valign="top" class="text"><p>In the above example, we first include <span class="codeInline">FusionCharts.js</span> file to enable us embed the chart using JavaScript. We also include <span class="codeInline">FusionCharts.cfm</span> to help us easily embed the charts.</p>
      <p>Thereafter, we define an CFM array <span class="codeInline">arrData</span> to store sales data for 6 different products. The array has three columns - first one for data label (product) and the next two for data values. The first data value column would store sales information<br />
      for current year and the second one for previous year.</p>
      <p>We define a variable <span class="codeInline">strXML</span> to store the entire XML data. We also define <span class="codeInline">strCategories</span>, <span class="codeInline">strDataCurr</span> and <span class="codeInline">strDataPrev</span> variables to store XML data for categories elements, current year's dataset and previous year's dataset respectively. To build the XML, we iterate through the array and using string concatenation. We concatenate the entire XML finally in <span class="codeInline">strXML</span>. </p>
      <p>Finally, we render the chart using <span class="codeInline">renderChart()</span> function and pass <span class="codeInline">strXML</span> as <span class="codeInline">dataXML</span>. </p>
    <p>When you view the chart, you'll see a chart as under: </p></td>
  </tr>
  <tr>
    <td valign="top" class="text"><img src="Images/Code_ArrayMS.jpg" alt="" width="584" height="287" /></td>
  </tr>
  <tr>
    <td valign="top" class="highlightBlock">In <span class="codeInline">Download Package &gt; Code &gt; CFM &gt; ArrayExample</span>, we've more example codes to create Stacked and Combination Charts too, which have not been explained here, as they're similar in concept. You can directly see the code if you want to. </td>
  </tr>
</table>
</body>
</html>
